import styles from './index.module.scss';
import type { TableItem } from '../../hooks/useTableData';
import { useGlobeData } from '../../hooks/useGlobeData';
import { useRef, useEffect } from 'react';
import Title from '../Title';
import { Space } from 'antd';

const Table = (props: { title: string; }) => {
  const header = ['PO单号', '货主', '实收总数量'];
  const { poList } = useGlobeData();

  const data = poList;

  const bodyRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const body = bodyRef.current as HTMLDivElement;
    const timer = setInterval(() => {
      body.scrollTop += 1;
      if (body.scrollTop >= body.scrollHeight - 230) {
        body.scrollTop = 0;
      }
    }, 100);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <>
      <Space
        style={{
          padding: '12px 20px 20px 20px',
          background: 'rgba(0,0,0,0.1)',
          borderRadius: 16,
        }}
        direction="vertical"
        size={12}
      >
        <Title title={props.title} />
        <div className={styles.head}>
          {header.map((item, index) => (
            <div key={item} style={{ width: index == 2 ? 100 : 130 }}>
              {item}
            </div>
          ))}
        </div>
        <div className={styles.body} ref={bodyRef}>
          <div
            className={styles.bodyInner}
            style={{
              height: `${data.length * 22}px`,
              transform: `translateY(-${bodyRef?.scrollTop || 0}px)`,
              transition: 'transform 50ms linear',
            }}
          >
            {data?.map((item, index) => (
              <div key={index} className={styles.row}>
                <div className={styles.index}>{index + 1}</div>
                {item.map((c, index) => (
                  <div
                    style={{
                      width: index == 2 ? 100 : 130,
                      paddingRight: '15px',
                    }}
                    key={index}
                    className={`${index !== 2 ? styles.item : ''}`}
                  >
                    {c}
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </Space>
    </>
  );
};

export default Table;
